<html>
    <head>
	    <title></title>
        <style>
            html,body{
                height: 100%;
                width: 100%;
                background: #161B2E;
            } 
        
            /*
            系统共用部分
            */
            body {
                font-family: Consolas, Monaco, monospace,"Microsoft YaHei",sans-serif;
                font-size: 14px;
                direction: ltr;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                text-rendering: optimizelegibility;
                position: relative;
                overflow: hidden;
            }

            /* 内外边距通常让各个浏览器样式的表现位置不同 */
            body,
            dl,
            dt,
            dd,
            ul,
            ol,
            li,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            pre,
            code,
            form,
            fieldset,
            legend,
            input,
            textarea,
            p,
            blockquote,
            button,
            article,
            aside,
            details,
            figcaption,
            figure,
            footer,
            header,
            menu,
            nav,
            i,
            select,
            section {
                margin: 0;
                padding: 0;
            }

            #content {
                height: 100%;
                padding: 10px;
                position: relative;
            }

            .header-item{
                padding: 0 0 5px 20px;
                height: 30px;
                line-height: 30px;
                color: #7D89B8;
                display: inline-block;
            }

            #log-content{
                color: #c7cce6;
                background: #0C0F1C;
                overflow: auto;
                height: calc(100% - 50px);
                width: 100%;
                padding: 10px 10px; 
                box-sizing: border-box;
                font-family: Consolas, Monaco, monospace,"Microsoft YaHei",sans-serif;
                line-height: 24px;
                word-break: break-all
            }
            .red {
                color: #ff3636;
            }
            .yellow {
                color: #FAAD14;
            }
            .green {
                color: #17b07f
            }
            .blue {
                color: #3384FF;
            }
            module, frozen{
                display: block;
            }

            .button {
                background: #2C3450;
                height: 26px;
                line-height: 26px;
                border-radius: 3px;
                box-sizing: border-box;
                cursor: pointer;
                width: 50px;
                text-align: center;
                color: #7D89B8;
                font-size: 11px;
            }

            .button:hover {
                background: #424C6E;
                color: #fff;
            }

            .fr {
                float: right;
            }

            ::-webkit-scrollbar-track{    
                background: #101425;
            }

            ::-webkit-scrollbar-button {
                visibility: hidden;
            }

            ::-webkit-scrollbar{
                position: relative;
                transition: all 0.2s ease 0s;
                cursor: pointer;
            }
            ::-webkit-scrollbar:horizontal{
                position: relative;
                transition: all 0.2s ease 0s;
                background: transparent; 
                cursor: pointer;
            }

            ::-webkit-scrollbar-thumb {
                background: #2C345099;  
            }

            ::-webkit-scrollbar-corner {
                background: transparent; 
            }

        </style>
    </head>
    <body>
        <div id="content">
            <div class="header-content">
                    <div class="header-item fr">
                            <div class="button" id="fresh-btn">刷新</div>
                    </div>
                    <div class="header-item fr">
                            <div class="button" id="clear-btn">清空</div>
                    </div>
                    <div class="header-item fr" >
                        <input type="checkbox" id="scroll-to-bottom-checkbox"></input> 滚动到底部
                    </div>
                    <div class="header-item fr" >
                        <input type="checkbox" id="norwap-checkbox"></input> 单行显示
                    </div>
                  
            </div>
            
            <div id="log-content"></div>
        </div>
       
    </body>
    <script type="text/javascript">
    const path = require('path');
    const fs = require('fs-extra');
    const ipc = require('electron').ipcRenderer
    const BrowserWindow = require('electron').remote.BrowserWindow;
    const { getLog, debounce, clearFileContent } = require('./utils.js');
    const gaze = require('gaze');

    var getGlobalData = {
        ifScrollToBottom: false,
        logPath: ''
    }

    const logColor = {
        info: 'green',
        trace: '',
        error: 'red',
        warning: 'yellow',
        debug: 'blue',
        critical: 'red'
    }

    function dealMessage(line) {
        let lineData;
        try{
            lineData = JSON.parse(line);
        }catch(err){
            return false;
        }
        let messages = lineData.message.split('\n').filter(m => m !== '');
        return messages.map(message => {
            message = message.split('\n[')
                .join('<br\>[')
                .replace(/\[  info  \]/g, `[ <span class="${logColor.info}">info</span> &nbsp;&nbsp;&nbsp;]`)
                .replace(/\[ trace  \]/g, '[ trace &nbsp;&nbsp;]')
                .replace(/\[ error  \]/g, `[ <span class="${logColor.error}">error</span> &nbsp;&nbsp;]`)
                .replace(/\[warning \]/g, `[ <span class="${logColor.warning}">warning</span> ]`)
                .replace(/\[ debug  \]/g, `[ <span class="${logColor.debug}">debug</span> &nbsp;&nbsp;]`)
                .replace(/\[critical\]/g, `[ <span class="${logColor.critical}">critical</span>]`)
            if(
                message.indexOf('Failed') !== -1 ||
                message.indexOf('Traceback') !== -1 ||
                message.indexOf('critical') !== -1 ||
                message.indexOf('uncaught exception') !== -1
            ) 
            message = `<span class="error red">${message}</span>`
            return { message }
        })
    }

    function scrollToBottom() {
        let timer = setTimeout(() => {
            if(getGlobalData.ifScrollToBottom) {
                const $logContent = document.getElementById('log-content');
                $logContent.scrollTop = 100000000000
            }
            clearTimeout(timer)
        }, 300)
    }

    function showLogs(logPath, dealMessage) {
        return getLog(logPath, '', dealMessage).then(res => {
            let logs = [];
            res.list.forEach(l => logs.push(l.message))
            let logsHTML = logs.join('<br/>');
            const $logContent = document.getElementById('log-content');
            $logContent.innerHTML = logsHTML
        })
    }

    ipc.on('show-log', function(event, { winId, logPath }){
        ipc.removeAllListeners('show-log')
        document.title = logPath;
        getGlobalData.logPath = logPath
        showLogs(logPath, dealMessage).then(() => scrollToBottom())
        gaze(logPath, (err, watcher) => {
            const watched = watcher.watched();
            watcher.on('changed', debounce((...args) => {
                showLogs(logPath, dealMessage).then(() => scrollToBottom())
            }))
        })
    })

    document.getElementById('clear-btn').addEventListener('click', () => {
        const logPath = getGlobalData.logPath;
        if(!logPath) return;
        clearFileContent(logPath)
    })

    document.getElementById('fresh-btn').addEventListener('click', () => {
        const logPath = getGlobalData.logPath;
        if(!logPath) return;
        showLogs(logPath, dealMessage).then(() => scrollToBottom())
    })

    document.getElementById('scroll-to-bottom-checkbox').addEventListener('input', () => {
            getGlobalData.ifScrollToBottom = !getGlobalData.ifScrollToBottom
            if(getGlobalData.ifScrollToBottom) scrollToBottom();
        })

    const $logContent = document.querySelector('#log-content');            
    $logContent.style.whiteSpace = ''
    document.getElementById('norwap-checkbox').addEventListener('input', () => {
        if($logContent.style.whiteSpace !== '') $logContent.style.whiteSpace = '';
        else $logContent.style.whiteSpace = 'nowrap';
    })

    </script>
</html>